
<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-25 14:06:28
 * @LastEditTime: 2023-06-28 15:44:02
 * @FilePath: \my-project\src\views\home\EquitiesView.vue
-->
<template>
  <div class="cq-equities">
    <div class="banner">
        <div class="banner-con tc cfff">
            <h2 class="fz44 fw400 mb18">供应商合作</h2>
            <p class="fz22 lh36">橙券诚邀您的加入，更高效的合作方式，更尖端的技术接入
                我们期待与您携手前行共创未来</p>
        </div>
    </div>
    <div class="main-flow w920 ">
        <h3 class="flow-title c333 fz30 fw400">
            入驻流程
        </h3>
        <ul class="flow-detail flex flex-between">
            <li v-for="(item) in flowDate" :key="item.id">
                <img :src="$utils.getImg(item.pic)" :width="item.width" :height="item.height" alt="!">
                <p class="item.content" v-if="item.content">填写信息</p>
            </li>
        </ul>
    </div>
    <div class="main-apply">
        <div class="con-apply flex flex-column flex-between">
            <h3 class="app-title fz30 c333 fw400">入驻申请</h3>
            <input type="text" placeholder="您的姓名" v-model="username">
            <input type="text" placeholder="您的手机号码" v-model="phone">
            <input type="text" placeholder="您要供应的资源" v-model="resource">
            <button @click="sendReq(username, phone, resource)">提交信息</button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
      username: '',
      phone: '',
      resource: '',
      flowDate: [
    {
      id: 0,
      pic: "co-7.png",
      content: "填写信息",
      width: 130,
      height: 130
    },
    {
      id: 1,
      pic: "co-6.png",
      width: 52,
      height: 24
    },
    {
      id: 2,
      pic: "co-5.png",
      content: "商务联系",
      width: 130,
      height: 130
    },
    {
      id: 3,
      pic: "co-6.png",
      width: 52,
      height: 24
    },
    {
      id: 4,
      pic: "co-4.png",
      content: "洽谈资源",
      width: 130,
      height: 130
    },
    {
      id: 5,
      pic: "co-6.png",
      width: 52,
      height: 24
    },
    {
      id: 6,
      pic: "co-3.png",
      content: "签约合作",
      width: 130,
      height: 130
    }
  ]
    }
  },
created(){
},
mounted(){},
watch:{},
computed:{
},
methods:{
  async sendReq (name, phone, resource) {
    const data = await this.$req('/application', 'post', {
      name: name,
      phone: phone,
      resource: resource
    });
    console.log("data:", data);
    this.username = '';
    this.phone = '';
    this.resource = '';
  }
},
}
</script>
<style lang="scss" scoped>

.banner {
  position: relative;
  height: 380px;
  background: url(../../assets/images/co-2.jpg) no-repeat center/cover;
}

.banner-con {
  position: absolute;
  width: 571px;
  height: 122px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.main-flow {
  padding-top: 88px;
  padding-bottom: 115px;
  .flow-title {
  width: 120px;
  margin: 0 auto;
  margin-bottom: 74px;
  }
  .flow-detail li {
  text-align: center;
  &:nth-of-type(even) {
  line-height: 134px;
    }
  }
}

.main-apply {
  box-sizing: border-box;
  height: 580px;
  background: url(../../assets/images/co-1.jpg) no-repeat center/cover;
  padding-top: 65px;
  padding-left: 443px;
  .con-apply {
  width: 493px;
  height: 409px;
    .app-title {
  border-left: 2px solid #333;
  padding-left: 20px;
    }
    input {
  width: 493px;
  height: 60px;
  color: #999;
  padding-left: 20px;
  border: 1px solid #d3d3d3;
  border-radius: 2px;
  outline:none;
  }
  button {
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ff7200;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  margin: 0 auto;
  border: none;
  }
  }
}
</style>
